<template>
<div class="form-list">
    <!-- 第一部分 -->
    <section  class="form-content">
        <div class="form-head form-head-one">
            <h1>撤回删减商品/服务项目申请</h1>
        </div>
        <el-form :label-position="labelPosition" label-width="280px" style="margin:0 auto;" ref="organization" :model="organization" class="model-form" :class="{'model-form-abel': editable}" size="small">
            <el-row>
                <el-col>
                    <el-form-item label="申请人名称(中文)：">
                        <el-input v-if="editable" v-model="organization.appliCh"></el-input>
                        <span v-else>{{organization.appliCh}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="(英文)：">
                        <el-input v-if="editable" v-model="organization.appliEn"></el-input>
                        <span v-else>{{organization.appliEn}}</span>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col>
                    <el-form-item label="申请人地址(中文)：">
                        <el-input v-if="editable" v-model="organization.appliAddrCh"></el-input>
                        <span v-else>{{organization.appliAddrCh}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="(英文)：">
                        <el-input v-if="editable" v-model="organization.appliAddrEn"></el-input>
                        <span v-else>{{organization.appliAddrEn}}</span>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col>
                    <el-form-item label="邮政编码：">
                        <el-input v-if="editable" v-model="organization.postCode"></el-input>
                        <span v-else>{{organization.postCode}}</span>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col>
                    <el-form-item label="联系人：">
                        <el-input v-if="editable" v-model="organization.contact"></el-input>
                        <span v-else>{{organization.contact}}</span>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col>
                    <el-form-item label="邮箱：">
                        <el-input v-if="editable" v-model="organization.contact"></el-input>
                        <span v-else>{{organization.email}}</span>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col>
                    <el-form-item label="电话：">
                        <el-input v-if="editable" v-model="organization.phone"></el-input>
                        <span v-else>{{organization.phone}}</span>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col>
                    <el-form-item label="代理机构名称：">
                        <el-input v-if="editable" v-model="organization.deptName"></el-input>
                        <span v-else>{{organization.deptName}}</span>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col>
                    <el-form-item label="商标申请号：">
                        <el-input v-if="editable" v-model="organization.regist_num"></el-input>
                        <span v-else>{{organization.regist_num}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="原删减申请号：">
                        <el-input v-if="editable" v-model="organization.registNumOri"></el-input>
                        <span v-else>{{organization.registNumOri}}</span>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col>
                    <el-form-item label="是否共有商标：">
                        <span>{{organization.share}}</span>
                        <!-- <el-radio-group v-model="organization.share">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="0">否</el-radio>
              </el-radio-group> -->
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col class="seal-container">
                    <el-form-item label="撤回理由：">
                        <el-input type="textarea" :rows="10" v-if="editable" v-model="organization.reasonsWithdrawal"></el-input>
                        <span v-else>{{organization.reasonsWithdrawal}}</span>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col>
                    <el-form-item label="营业执照：">
                        <imgshow>
                            <img :src='this.mconfig.host+organization.busimg' alt="营业执照加载出错">
                        </imgshow>
                    </el-form-item>
                    <el-form-item label="身份证（正反面）：" v-if="organization.appliType == 0 ?false:true">
                        <imgshow>
                            <img style="margin-top:5px;" :src='this.mconfig.host+organization.idcardface' alt="身份证加载出错">
                        </imgshow>
                    </el-form-item>
                    <el-form-item label="网上确认书：">
                        <imgshow>
                            <img :src='this.mconfig.host+organization.qrfile' alt="营业执照加载出错">
                        </imgshow>
                    </el-form-item>
                    <!--<el-form-item class="mar" label="其他附件 :" v-if="organization.otherfile != []">-->
                    <el-form-item class="mar" label="其他附件 :" v-if="organization.otherfile.length>0">
                        <imgshow v-for="(item,index) in organization.otherfile" :key="index">
                        <span class=""><img :src="mconfig.host+item" ></span>
                        </imgshow>
                    </el-form-item>
                </el-col>
            </el-row>

        </el-form>

        <!-- 盖章 -->
        <!-- <div class="seal">
        <el-row>
          <el-col :span="12" class="seal-container">
            <span>申请人章戳（签字）:</span>
          </el-col>
          <el-col :span="12" class="seal-container">
            <span>代理机构章戳:</span>
          </el-col>
          <el-col :span="12" :offset="12" class="seal-container">
            <span>代理人签字:</span>
          </el-col>
        </el-row>
      </div> -->
    </section>

    <!-- 第二部分 -->
    <section  class="form-content"   v-if="proAppendJson.length==0?false:true">
        <div  class="form-head">
            <h1>撤回删减商品/服务项目申请<br>（附页）</h1>
            <p>其他共有人</p>
        </div>
        <proAppend class="part" :callback="proAppendJson"></proAppend>
        <!-- <div>
            <el-form :label-position="labelPosition" label-width="280px" style="margin:0 auto;" ref="otherJson" :model="otherJson" class="model-form" :class="{'model-form-abel': editable}" size="small">
                <div v-for="(item,index) in proAppendJson" :key="index">
                    <el-row>
                        <el-col :span="24">
                            <el-form-item :label="index+1 +'.名称(中文)：'">
                                <span>{{item.partNameCh}}&nbsp;</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="(英文)：">
                                <span>{{item.partNameEn}}&nbsp;</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="地址(中文)：">
                                <span>{{item.partAddrCh}}&nbsp;</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="(英文)：">
                                <span>{{item.partAddrEn}}&nbsp;</span>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </div> -->
    </section>
</div>
</template>

<script>
import imgshow from "../common/imgshow"
import proAppend from "../common/proAppend"
export default {
    components:{
        imgshow,
        proAppend
    },
    name: 'Form',
    data() {
        return {
            labelPosition: 'right',
            organization: {
                appliCh: '', // 申请人名称（中文）
                appliEn: '', // 申请人名称（英文）
                appliAddrCh: '', // 申请人地址（中文）
                appliAddrEn: '', // 申请人地址（英文）
                postCode: '', //邮政编码
                contact: '', //联系人
                email:'',//电子邮件
                phone: '', //电话
                agent: '', // 代理机构名称
                regist_num: '', // 商标申请号
                registNumOri: '', // 原删减申请号
                share: '', //是否共有商标
                reasonsWithdrawal: '', //	撤回理由
                idcardimg: '', //身份证正面
                idcardface: '', //身份证反面
                busimg: '', //营业执照
                qrfile:'',//网上确认书
                otherfile:[],
                appliType: '', //有没有身份证
            },
            // 其他共有人
            proAppendJson: [],
            otherJson: {}, // 可编辑，这里没用
            editable: false, // 可编辑
            flag: true
        }
    },
    filters: {
        // 状态过滤器
        subStatusFilter(v) {
            switch (v) {
                case 1:
                    return '保存'
                    break;
                case 2:
                    return '选择通过'
                    break;
                case 3:
                    return '选择未通过'
                    break;
                case 4:
                    return '未审核'
                    break;
                default:
            }
        }
    },
    methods: {
        // 提交审核
        lastPage() {
            this.editable = false; // 更改为不可编辑
        },
        // 修改
        modify() {
            this.editable = true; // 更改为可编辑
        },
        // 图片上传成功
        handleAvatarSuccess(res, file) {
            this.organization.confirmation = URL.createObjectURL(file.raw);
        },
         
        // 初始化数据
        getData() {
            this.$http.get('/trademark/proWodgspa/findByIdDetl', {
                params: {
                    id: this.$route.query.id
                }
            }).then(response => {
                if (response.data.code == 200) {
                 
                    let resData = response.data.data.data;
                    let resAppend = response.data.data.append;

                    this.organization.appliCh = resData.appName; // 申请人名称（中文）
                    this.organization.appliEn = resData.appNameEn; // 申请人名称（英文）
                    this.organization.appliAddrCh = resData.busAddress; // 申请人地址（中文）
                    this.organization.appliAddrEn = resData.appAddEn; // // 申请人地址（英文）

                    this.organization.postCode = resData.postCode; //邮政编码
                    this.organization.contact = resData.contact; //联系人
                    this.organization.email = resData.email;//电子邮件
                    this.organization.phone = resData.phone; //电话

                    this.organization.agent = resData.agent; // 代理机构名称
                    // this.organization.branchNetworkId=resData.branchNetworkId; //代理机构名称
                    this.organization.regist_num = resData.regist_num; // 商标申请号
                    this.organization.registNumOri = resData.registNumOri; // 原删减申请号
                    this.organization.share = JSON.parse(resData.share); //  是否共有商标: 1:是0:否

                    this.organization.appliType = resData.appliType //有没有身份证0，1
                    this.organization.deptName = resData.deptName //代理网点
                    this.organization.otherfile = JSON.parse(resData.otherfile)

                    if (this.organization.share == 0) {
                        this.organization.share = "否";
                    }
                    if (this.organization.share == 1) {
                        this.organization.share = "是";
                    }

                    this.organization.reasonsWithdrawal = resData.reasonsWithdrawal; // 	撤回理由

                    this.organization.idcardimg = resData.idcardimg; // 	身份证正面
                    this.organization.idcardface = resData.idcardface; // 	身份证反面
                    this.organization.busimg = resData.busimg; // 	营业执照
                    this.organization.qrfile = resData.qrfile; //网上确认书
                    //console.log(this.mconfig.host+this.organization.busimg)

                    // 共有人...
                    this.proAppendJson = resAppend
                    if (this.proAppendJson[0].partAddrCh == "") {
                        this.flag = false;
                    } else if (this.proAppendJson[0].partAddrCh != "") {
                        this.flag = true;
                    }else{}

                    


                   


                }
            }).catch(error => {})
        }
    },
    created() {
        this.getData();
    },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
/* 模块标题 */
.model-title {
    padding: 0 100px;
    text-align: center;
    font-size: 28px;
    color: #666;
    font-weight: 400;
    margin-bottom: 40px;
}

.model-title h4,
.model-title p {
    margin: 10px 0;
}

.model-title p {
    font-size: 26px;
}

.model-title>h4 {
    font-size: 28px;
    font-weight: normal;
}

.seal {
    padding: 0 20px;
}

.seal-container {
    min-height: 50px;
}

/* 签字 */
.signature {
    color: #ccc;
}
</style><style lang="css">
.el-radio__input .el-radio__inner {
    border-color: #000;
    background: #fff;
}

/* 选中 */
.el-radio__input.is-checked .el-radio__inner {
    border-color: #666;
    background: #666;
}

.el-radio__inner {
    border-radius: 0;
    color: #000;
}

/* 选中 */
.el-radio__input.is-checked+.el-radio__label {
    color: #000;
}

/* 改 */

.form-list {
    display: inline-block;
    margin-left: 200px;
}

.form-list /deep/ .el-form-item__label {
    font-size: 18px;
    border-bottom: none;
    height: 30px;
    padding-right: 0;
}

.form-list /deep/ .el-form-item__content {
    font-size: 18px;
    border-left: none;
    border-bottom: none;
    /* padding-left: 10px; */
    height: auto;
    box-sizing: border-box;
    word-break: break-word;
}

.form-list：:v-deep .el-form-item {
    margin: 0;
}

.form-list .el-input.el-input--mini {
    font-size: 14px;
}

.form-list /deep/ .el-checkbox .el-checkbox__label {
    font-size: 18px;
}

.form-list .signs .el-row {
    margin: 150px 0;
}

.form-list .el-row .el-col {
    text-align: left;
}

.form-list .el-row .el-col span {
    font-size: 18px;
}

.form-content {
    width: 768px;
    margin: 0 auto;
}

.form-head h1,
.form-head p {
    font-size: 22px;
    font-weight: bold;
    text-align: center;
        margin: 120px auto 20px auto;
    max-width: 485px;
    line-height: 45px;
}

.form-head-one h1 {
    font-size: 30px;
    margin: 50px auto 40px auto;
}

.form-head p {
    font-size: 18px;
     margin: 0px auto 40px auto;
    font-weight: normal;
}

.idcard-img img,
.busimg-img img {
    display: inline-block;
    margin: 0 5px;
}

.busimg-img img {
    width: 500px;
}

.idcard-img img {
    width: 300px;
}

.idcard-img {
    width: 300px;
    margin-top: 10px !important;
}

.busimg-img {
    width: 500px;
    margin-top: 10px !important;
}

.form-list /deep/ .el-form-item--small.el-form-item {
    margin-bottom: 5px;
}

.form-content /deep/ .el-form-item {
    margin-bottom: 5px;
}

/* 改 */
.part{
    margin-left: 60px;
}
</style>
